@font-face{
    font-family: Ubuntu;
    src: url(Fonts/Ubuntu/Ubuntu-Regular.ttf)
}

*{
    padding: 0;
    margin: 0;
}

#logo{
    height: 60px;
    width: 60px;
}

/*Media query para escritorio o monitor*/
@media screen and (min-width: 1024px){
    header {
        background: rgb(129, 47, 47);
        width: 100%;
        position: fixed;
        border-bottom: 5px dotted rgb(255, 136, 0);
      }
    
      header nav {
        background:#75020200;
        display:inline-flex;
        justify-content: flex-end;
        
    }
    
    header nav .lista_padre_desktop {
        list-style: none;
        overflow: hidden;
    }
    
    header nav .lista_padre_desktop li {
        float: right;   
    }
    
    header nav .lista_padre_desktop li a {
        padding:20px;
        color:#fff;
        text-decoration: none;
    }

    header nav .lista_padre_desktop li a:hover {
        background:rgba(211, 105, 105, 0.9);
    }
    
    label{
        display: none;
    }

    main{
        margin-left: 10%;
        margin-right: 10%;
        padding: 6%;
        columns: 4 ;
        column-gap: 3%;
        border-image: url("/Images/bordes.jpeg");
        border-image-width: 2vw;
        border-image-repeat: stretch;
        border-image-slice: 30 30 30 30;
    }

    body
    {
        background-image: url("../Images/fondo.jpeg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        font-family: sans-serif;
        resize: both;
        text-align: justify;
        border-style: hidden;
        color: rgb(0, 3, 0);
        position: relative;
        
        
    }
    body:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 1%; 
        height: 100%;
        background-image: url("../Images/borde.jpeg");
        background-size: cover;
        z-index: -1;
    }
    
    body:after {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        width: 1%; 
        height: 100%;
        background-image: url("../Images/borde.jpeg");
        background-size: cover;
        z-index: -1;
    }

    #menu {
        display: none;
    
      }

    section{
        margin-left:  4.5%;
        margin-right: 8%;
    }

    section article{
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    border-style: solid;
    border-radius: 2%;
    padding: 5%;
}
    
    label{
        color: #75020200;
    }
    
    img{
        margin-left: 4.5%;
        width: 65%;
        
    }
    
    
    ul{
        list-style: none;
        padding: 0;
    }
    
    ol{
        list-style: none ;
        padding: 0;
    }
    
    h2{
        margin-left:  4.5%;
        margin-right: 8%;
        
        font-family: Ubuntu;
    }
    
    footer{
        text-align: center;
        color: rgb(0, 0, 0);
        margin-top: 1%;
        margin-bottom: 2%;

    }

}

/*Media query para pantallas de tablets*/
@media screen and (min-width: 768px) and (max-width: 1023px){

    header {
        background: rgb(129, 47, 47);
        width: 100%;
        position: fixed;
        border-bottom: 5px dotted rgb(255, 136, 0);
      }
    
      header nav {
        background:#75020200;
        display:inline-flex;
        justify-content: flex-end;
    }
    
    header nav .lista_padre_desktop {
        list-style: none;
        overflow: hidden;
        
    }
    
    header nav .lista_padre_desktop li {
        float: right;
    }
    
    header nav .lista_padre_desktop li a {
        padding:20px;
        color:#fff;
        text-decoration: none;
    }

    header nav .lista_padre_desktop li a:hover {
        background:rgba(211, 105, 105, 0.9);
    }

    label{
        display: none;
    }

    main{
        padding-top: 20%;
        padding-left: 4%;
        columns: 2 ;
    }
    
    body
    {
        background-image: url("../Images/fondo.jpeg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        font-family: sans-serif;
        resize: both;
        text-align: justify;
        border-style: hidden;
        color: rgb(0, 3, 0);
        position: relative;
        
    }

    body:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 2%; 
        height: 100%;
        background-image: url("../Images/borde.jpeg");
        background-size: cover;
        z-index: -1;
    }

    #menu {
        display: none;
        
      }

    section{
        border-style: groove double;
    }

    section article{
        font-style: italic;
        font-family: 'Times New Roman', Times, serif;
        font-size: medium;
        border-style: ridge;
        border-color: black;
    }
    
    label{
        color: #75020200;
    }
    
    img{
        margin-left: 4.5%;
        width: 65%;
        border-style: double;
        border-width: 2vw;
    }

    #logo{
        border-style: none;
        width: 100%;
    }
        
    ul{
        list-style: none;
        padding: 0;
    }
    
    ol{
        list-style: none ;
        padding: 0;
    }
    
    h2{
        margin: 0 5%; 
        font-family: Ubuntu;
    }
    
    
    footer{
        text-align: center;
        color: rgb(0, 0, 0);
        border-top: solid;
        margin-bottom: 2%;
        
    }

}

/*Media query para pantallas de smartphone*/
@media (max-width: 767px){
    @font-face{
        font-family: Ubuntu;
        src: url(Fonts/Ubuntu/Ubuntu-Regular.ttf)
    }
    
    *{
        padding: 0;
        margin: 0;
    }

     header {
        background: rgb(129, 47, 47);
        width: 100%;
        position: fixed;
        border-bottom: 5px dotted rgb(255, 136, 0);
      }
    
      header nav {
        background:#75020200;
        display:inline-flex;
        justify-content: flex-end;
    }
    
    header nav .lista_padre_indice {
        list-style: none;
        overflow: hidden;
    }
    
    header nav .lista_padre_indice li {
        float: right;
    }
    
    header nav .lista_padre_indice li a {
        padding:20px;
        color:#fff;
        text-decoration: none;
    }

    header nav .lista_padre_indice li a:hover {
        background:rgba(211, 105, 105, 0.9);
    }

    main{
        padding-top: 21%;
    }

    section{
        overflow: hidden;
    }
    
    
    .lista_padre_desktop{
        display: none;
    }
    
    body
    {
        background-image: url("../Images/fondo.jpeg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        font-family: sans-serif;
        resize: both;
        text-align: justify;
        border-style: hidden;
        color: rgb(0, 3, 0);
        columns: 1;
    }
    body:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 1%; 
        height: 100%;
        background-image: url("../Images/borde.jpeg");
        background-size: cover;
        z-index: -1;
    }
    
    body:after {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        width: 1%; 
        height: 100%;
        background-image: url("../Images/borde.jpeg");
        background-size: cover;
        z-index: -1;
    }

    #menu {
        
        display: none;
        
      }
      
      label {
        display: inline-block;
        padding: 5%;
        border-style:double double;
        text-align: right;
        background-color: rgba(236, 113, 113, 0.308);
        
      }
      
      .lista_padre_indice {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: rgb(216, 60, 60); 
        border: 1% solid black; 
        padding: 1%; 
        display: none;
      }
      
      #menu:checked + label .lista_padre_indice {
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        border: black;
        padding: 1%;
      }
      

    .contenido{
        margin: 0 5%;
    }
    
    header {
        background: rgb(129, 47, 47);
        width: 100%;
        position: fixed;
        justify-content: space-between; 
        align-items: center; 
        z-index: 100;
      }

    
      header nav {
        background:#75020200;
        margin-bottom:10px;
        display:inline-flex;
        justify-content: flex-end;
    }
        header nav ul{
            flex-direction: column;
            align-items: flex-end;
        }

         header nav ul li{
            margin: 1% 0;
         }

         header nav label {
            padding: 20px;
            cursor: pointer;
          }
     
      
    img{
        float: left;    
        width: 40%;
    }
    
    .ImagenDentro{
        clear: left;
        padding: 1%;
    }   
    
    ul{
        list-style: none;
        padding: 0;
    }
    
    ol{
        list-style: none ;
        padding: 0;
    }
    
    h2{
        margin: 0 5%; 
        font-family: Ubuntu;
        padding-right: 2%;
    }
    
    
    footer{
        text-align: center;
        color: rgb(0, 0, 0);
        border-top: solid;
        margin-bottom: 2%;
        
    }

}